<script setup>
import {onLoad,onShareAppMessage,onShareTimeline} from '@dcloudio/uni-app'
import {reqIndexData} from '../../api/index.js'
import {ref} from 'vue'
import {Banner} from './banner/banner.vue'
import {Entrance} from './entrance/entrance.vue'
import {MovingGoods} from './movingGoods/movingGoods.vue'
import {pageSkeleton} from './pageSkeleton/pageSkeleton.vue'

let loading = ref(false)
const bannerList = ref({})
const categoryList= ref([])
const activeList= ref([])
const hotList= ref([])
const guessList= ref([])
/**
 * @description 请求首页的所有数据
 */
const getIndexData = async()=>{
	const res = await reqIndexData()
	bannerList.value = res[0].data
	categoryList.value = res[1].data
	activeList.value = res[2].data
	guessList.value = res[3].data
	hotList.value = res[4].data	
	// console.log(res);
}
onLoad(async()=>{
	await getIndexData()
	loading.value = true
})
// 转发给好友，群聊
onShareAppMessage(()=>{
	
})
// 把小程序分享到朋友圈
onShareTimeline(()=>{
	
})
</script>

<template>
	<view class="index" v-if="loading">
		<!-- 导航栏下面的半圆 -->
		<view class="nav-bottom"></view>
		<!-- 轮播图 -->
		<Banner v-bind:bannerList="bannerList"></Banner>
		<!-- 商品导航 -->
		<Entrance v-bind:categoryList="categoryList"></Entrance>
		<!-- 活动商品 -->
		<MovingGoods v-bind:activeList="activeList"></MovingGoods>
		<!-- 猜你喜欢 -->
		<goods-list v-bind:guessList="guessList" title='猜你喜欢'></goods-list>
		<goods-list v-bind:guessList="hotList" title='人气推荐'></goods-list>
	</view>
	<pageSkeleton v-else></pageSkeleton>
</template>

<style lang="scss" scoped>
.index{
	padding: 0 16rpx;
	height: 100vh;
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	.nav-bottom{
		position: absolute;
		top: 0;
		left: -80rpx;
		right: -80rpx;
		z-index: -1;
		height: 200rpx;
		background: #F3514F;
		border-radius: 0 0 50% 50%;
	}
	.good-hot{
		margin-top: 16rpx;
	}
	.good-hot{
		.scroll-x{
			display: flex;
			flex-direction: row;
			height: 420rpx;
			&:last-child{
				margin-right: -16rpx;
			}
			.good-box{
				width: 320rpx;
				height: 420rpx;
				margin-right: 16rpx;
				.good-item{
					display: flex;
					width: 320rpx;
					flex-direction: column;				
					image{
						width: 100%;
						height: 320rpx;
					}
					text{
						font-size: 26rpx;
						&:nth-child(2){
							font-weight: bold;
						}
					}
				}
			}							
		}
	}
}
		
</style>
